{include file="common/head"}
<head>
<title>牛拉拉货运系统手机版</title>

<style>
        #top{background: #f60;opacity: 1;}
        #bottom{background: #f60;color: white;opacity: 1;}  
        a{color: white;} 
        .price{color: white;text-align: center;background: red;border-radius: 15px;}
        .card{overflow: hidden;margin-bottom: 10px;padding: 5px 10px;border-radius: 10px;border: 0;display: none;box-shadow: 0px 0px 2px #555;}
        .taked,.isMine{transform: rotate(-45deg);background: #f60;z-index: 10;position: absolute;right:-25px;bottom: 10px;width: 100px;text-align: center;}
        .isMine{
            background-color: #00f;color: white;
        }
        .order_cat{background: #f60;color: #fff;padding: 3px;}
        .order_sel{background: #f7f7f7; color: #f60;border-width:2px;}
        .normal,.finish,.cancel{border-bottom: 1px solid #555;text-align: center;padding: 2px 10px;}
        .finish{color: blue;}
        .cancel{color:ccc;}
        #order_op button{border-radius: 15px;padding: 3px 8px;border: 1px solid #777;box-shadow: 0 0 2px #555;}
        .layui-layer a{border-radius: 15px;}

</style>
</head>
<body style="background-imagex: linear-gradient(to bottom,#f60, #fff);background: #f60;">
<div class="container-fluid" style="max-width: 800px;margin:0 auto;">
    <div id="header"></div>
    <div id="foot"></div>    
    <div id="top" class="row" class="text-center" style="color:white;">
        <div class="col-2 text-center" style="padding: 0;">
            <span class="bi-chevron-left btn-back"></span>
        </div>
        <div class="col-8 text-center">订单大厅</div>
        <div class="col-2 text-center" style="padding: 0;">
            <span class="bi-arrow-clockwise" id="reload"></span>
        </div>
    </div>
    <div style="height:90px;"></div>

    <div class="row" style="position: fixed;top:50px;margin:0;z-index: 21;border-bottom:1px solid #f00;overflow:hidden;left:15px;right:15px;">
        <div class="order_cat col-3 text-center" type="new">新单</div>
        <div class="order_cat col-3 text-center" type="onway">进行中</div>
        <div class="order_cat col-3 text-center" type="complete">已完成</div>
        <div class="order_cat col-3 text-center" type="canceled">已取消</div>
    </div>

    <div id="content" style="background-color:#ccc;border-radius: 10px;padding: 10px 0;">
        <input type="hidden" id="uid" value="{$uid}" readonly />
        <input type="hidden" id="truck_type" value="{$truck_type}" readonly />
        <input type="hidden" id="order_type" value="{$order_type}" readonly />

        {foreach $list['data'] as $k=>$kv}
        <div class="card" oid="{$kv['id']}" driver_id="{$kv['driver_id']}" status="{$kv['status']}" creater="{$kv['creater']}" pos1="{$kv['pos1']}" pos2="{$kv['pos2']}" driver_pos = "{$kv['driver_pos']}" truck_type="{$kv['truck_type']}" >

            {if $kv['driver_id']==$uid}<div class="taked">Driver</div>{/if}
            {if $kv['creater']==$uid}<div class="isMine">Mine</div>{/if}

            <div class="row" style="font-weight: bold;color:#f60;">
                <div class="col-4">Sn:{$kv['order_no']}</div>
                <div class="col-4">{$kv['distance']}km</div>
                <div class="col-4">
                    <div class="price">$
                        {if $kv['creater']==$uid} {$kv['price1']}{else if $kv}{$kv['price2']}{/if}
                    </div>
                </div>
            </div>
            <!--地址信息 -->
            <div style="margin-bottom: 5px;border-top:1px solid #ccc;color:#055;">
                <div style="">[<c style="font-weight: bold;color:blue;">装</c>]{$kv['address1']['address']}
                </div>
                <div >
                    <span class="bi-person-fill"></span>
                    <c style="">{$kv['address1']['contact']}</c>
                    <span class="bi-phone-fill"></span>
                    <c style="">{$kv['address1']['mobile']}</c>
                </div>
            </div>
            <div style="color:#550;border-top:1px solid #ccc">
                <div style="">[<c style="font-weight: bold;color:green;">卸</c>]{$kv['address2']['address']}</div>
                <div >
                    <span class="bi-person-fill"></span>
                    <c style="">{$kv['address2']['contact']}</c>
                    <span class="bi-phone-fill"></span>                    
                    <c style="">{$kv['address2']['mobile']}</c>
                </div>
            </div>

            <div style="margin:5px 0 10px;border-top:1px solid #ccc">
                {$kv['want_time']}【<c class='cat_name'>{$kv['cat_name']}</c>】,
                <span class="bi-person"></span>:
                {$kv['creater_name']}
                {if $kv['creater']!=$uid}<span class="bi-chat" style="margin:0 4px;" to_id="{$kv['creater']}"></span>{/if}
                
                <c class="normal {if $kv['status']==6}finish {elseif $kv['status']>7}cancel{/if}">{$kv['status_name']}</c>
                {if $kv['driver_id']}
                    司机:{$kv['driver_name']}
                    {if $uid != $kv['driver_id']}
                         <span class="bi-chat" to_id="{$kv['driver_id']}"></span>  
                    {/if}
                {/if}
            </div>

            <!--操作按钮-->
            <div id="order_op" class="" style="display: inline-block;">
                <button class="btn btn-sm btn-info"><span class="bi-info-circle"></span>详情</button>
                {if($kv['creater']==$uid && $kv['status']==1) || ($kv['driver_id']==$uid && $kv['status']>1 && $kv['status']<5)}
                    <button class="btn btn-sm btn-secondary btn-cancel"><span class="bi-x"></span>取消</button>
                {/if}
                {if($kv['status']<5 && $kv['creater']!=$uid) || ($kv['status']==5 && $kv['creater']==$uid)}
                    <button class="btn btn-sm btn-warning btn-take">
                        <span class="bi-check"></span>{$kv['status_for']} <!--按钮描述文字-->
                    </button>
                {/if}
                {if $kv['status']==6 && ($kv['creater']==$uid || $kv['driver_id']==$uid)}
                    <button class="btn btn-sm btn-secondary btn-comm">
                        <span class="bi-chat-dots">评价</span>
                    </button>                
                {/if}
            </div>

        </div>
        {/foreach}
        <div class="text-center" style="margin-top:20px;">已经到底了哦!</div>

    {include file="common/pagination"}
    {include file="order/order_route"}
    <input type="text" id="pos1" value='' style="display: none;" />
    <input type="text" id="pos2" value='' style="display: none;" />

    </div>
    <div id="mask" style=""></div>

    <div id="goods_list" style="position: fixed;bottom: 0;width:99%;max-width: 800px;background-color: #fff; z-index: 20;">
        <table class="table table-sm table-striped" style="width:100%;">
            
        </table>
    </div>
</div>
<div style="height: 90px;text-align: center;"></div>
 {include file="common/bottom"}


</body>

<script type="text/javascript">
  

  $(document).ready(function(){
    var status_arr = [];
    $("#to_order").css({'background':"#f90"});    

    $.post('/index.php/order/get_status',function(res){
        var res=JSON.parse(res);
        if(res.code){
            status_arr = res.status;
        }else{
            layer.open({content:'错误发生！'});
        }

        //console.log(status_arr);
        
    })

    //upload position of driver
    function truck_pos() {
        if($("#truck_type").val()>1 && current_pos){
            $.post('/index.php/order/set_driver_pos',{driver_pos:current_pos,current_city:$("#init_city").text()},function(res){
                var res =JSON.parse(res);
                console.log(res);
            });
        }else{
            console.log('Normal customer!');
        }
    };
    setInterval(truck_pos, 30*1000);

    $("#reload").on('click',function(e){
        location.href="/index.php/order/order_take/order_type/"+$("#order_type").val();
    });

    $("#goods_list,#mask").on('click',function(e){
        $("#goods_list").hide();
        $("#mask").hide();
    })

    $(".btn-back").on('click',function(){
        window.history.back();
    })

    $(".bi-chat-dots").on('click',function(e){
        var oid = $(this).parents('.card').attr('oid');
        location.href="/index.php/comments/comm_edit/order_id/"+oid;
    })


    //聊天窗口
    $(".bi-chat").on('click',function(e){
        var to_id = $(this).attr('to_id');
        if(!to_id) return;

        location.href="/index.php/msg/msg/to_id/"+to_id;
    })



    //分类订单
    $(".order_cat").on('click',function(){
        $(".order_cat").removeClass('order_sel');
        $(this).addClass('order_sel');
        var type=$(this).attr('type');

        $(".card").hide();
        if(type=='new'){
            $(".card").each(function(){
                var status=$(this).attr('status');
                if(status==1) $(this).show();
            });
        }else if(type=='onway'){
            $(".card").each(function(){
                var status=$(this).attr('status');
                if(status<6 && status>1) $(this).show();
            });
        }else if(type=='complete'){
            $(".card").each(function(){
                var status=$(this).attr('status');
                if(status==6) $(this).show();
            });            
        }else{
            $(".card").each(function(){
                var status=$(this).attr('status');
                if(status>6) $(this).show();
            });              
        }
        $("#order_type").val(type);


    });

    var order_cat = $("#order_type").val();
    $(".order_cat").each(function(){
        if($(this).attr('type')==order_cat){
            $(this).trigger('click');
        }
    })
    //$(".order_sel").trigger('click');


    $(".card").on('click','.btn-info',function(e){

        var el=$(this).parents('.card');
        var pos11=el.attr('pos1');
        var pos22=el.attr('pos2');
        var driver_pos=el.attr('driver_pos');

        if(!pos1 || !pos2) {layer.msg('此订单未设置地址坐标！');return;}
        //layer.msg(pos1+","+pos2);

        $("#pos1").val(pos11);
        $("#pos2").val(pos22);
        $("#driver_pos").val(driver_pos);

        $("#container").show();
        $("#mask").show();

        outCalcRoute();
        if(driver_pos) {
            outTruckPos(JSON.parse(driver_pos));
        }

    });


    //订单处理按钮
    $(".card").on('click','.btn-take,.btn-cancel',function(){
        var el=$(this).parents('.card');
        var uid =$("#uid").val();
        var oid =el.attr('oid');
        var driver_id =el.attr('driver_id');
        var truck_type =el.attr('truck_type');
        var creater =el.attr('creater');
        var status=el.attr('status');
        var msg = status_arr[status][3];
        var next_status = status_arr[status][2];


        if(status*1>6) {
            layer.open({"title":"系统提示","content":"订单已取消,不能再操作了！"});
            return; //完成的取消的
        }

        //判断是什么操作，决定提交api及参数
        var btn_txt=$(this).text().trim();
        var url="";
        var post={};
        var go=0;

        if(btn_txt=="取消"){
            url="/index.php/order/order_cancel";
            msg="取消";
            post={id:oid,memo:msg};

            //司机操作不能新单，防错
            if(uid==driver_id){
                if(status*1==1){
                    layer.open({'title':'系统提示','content':'此订单为新单,只能发单人取消！'});
                    return;
                }
            }
            if(uid==creater){
                if(status*1>1){
                    layer.open({'title':'系统提示','content':'司机已接单，你不能取消此订单！'});
                    return;
                }
            }

    
        //非取消操作            
        }else{
            url="/index.php/order/order_take";
            post={id:oid,ajax:1,memo:msg,status:next_status};
        

            //司机操作，只能操作 1，2，3，4，5(接单2，出发装货3，出发送货4，送达5)
            if(uid==driver_id){
                if(status*1==5){
                    layer.open({'title':'系统提示','content':'货物已送达,请耐心等待客户确认收货！'});
                    return;
                }
                if(status*1==6){
                    layer.open({'title':'系统提示','content':'货物已收货，订单已完成！'});
                    return;
                }

                //车型不对的提示,大车可以接小单，所以只做一个提示。
                if($("#truck_type").val()!=truck_type){
                    go =confirm('你的车型与客户需求车型【'+el.find('.cat_name').text()+'】不符,是否接单?');
                    if(!go) return;
                }

            }

            // //客人收货
            if(uid==creater){
                if(status*1==1){
                    layer.open({'title':'系统提示','content':'订单已发布，请耐心等待司机接单！'});return;
                }else if(status==2){
                    layer.open({'title':'系统提示','content':'司机已接单，请耐心等待，或联系司机！'});return;
                }else if(status==3){
                    layer.open({'title':'系统提示','content':'司机正在赶来，请耐心等待！'});return;
                }else if(status==4){
                    layer.open({'title':'系统提示','content':'货物已上路，请耐心等待！'});return;
                }
            }
        }

        console.log(go);

        layer.confirm('订单状态:['+status_arr[status][0]+'],是否确认'+msg+"?", {
          btn: ['Yes','No'] //按钮
        }, function(){
            $.ajax({
                type:'post',
                data:post,
                url:url,
                dataType:'json',

                success:function(res){
                    res = JSON.parse(res);

                    layer.alert(res.msg,{},function(){
                        if(res.code){
                            //location.href='/index.php/order/order_take/order_type/'+ $("#order_type").val();
                            $("#reload").trigger('click');
                        }
                    });

                    

                }
            })
        }, function(){
             //layer.msg('yes!');
              //return false;
        });




    })    



     
  })

</script>


</body>
</html>
